<template>
  <div class="head">
      <div class="head_left" @click="back(back_num)">
          <i class="iconfont iconfanhui"></i>
      </div>
      <div class="head_close">
        <i class="iconfont iconclose"></i>
      </div>
      <div class="head_center">
          {{title}}
      </div>
      <div class="head_right" >
        <i class="iconfont icongengduo"></i>
      </div>
  </div>
</template>

<script>
export default {
  props:['title','back_num'],
  methods:{
    back(back_num=-1){
      this.$router.go(back_num)
    },
    showRule(){
      this.$emit("showRule")
    }
  }
}
</script>

<style lang="less">
.head{
  height: 60px;
  background: @color;
  padding: 0 .5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  z-index: 1999;
  width: 100%;
  max-width: @maxWidth;
  margin: 0 auto;
  .head_left{
    height: 100%;
    width: 1.5rem;
    position: absolute;
    display: flex;
    justify-content: flex-start;;
    align-items: flex-end;
    padding-bottom: .5rem;
    .iconfanhui{
      font-size: 1.1rem !important
    }
  }
  .head_close{
    height: 100%;
    width: 1.5rem;
    position: absolute;
    display: flex;
    justify-content: flex-start;;
    align-items: flex-end;
    left: 2.5rem;
    padding-bottom: .5rem
  }
  .head_center{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: .8rem;
    padding-bottom: .5rem
  }
  .head_right{
    height: 100%;
    width: 4rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    padding-right: .5rem;
    align-items: flex-end;
    padding-bottom: .5rem;
    .iconfont{
      font-size: 1.1rem
    }
  }
}

</style>
